<template>
  <div class="auto">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <p class="bg-info text-center" style="padding: 8px;">补卡信息</p>
        <div class="row" style="margin-top:10px;">
          <!--<label class="radio-inline col-sm-2" v-if="row.f_meter_type !== '机表'">-->
		        <!--<input type="radio" value="IC卡坏" v-model="model.f_fillcard_type" checked class="magic-radio" id="type_one">-->
            <!--&lt;!&ndash; <strong>IC卡坏</strong> &ndash;&gt;-->
            <!--<label for="type_one">IC卡坏</label>-->
	        <!--</label>-->
          <label class="radio-inline col-sm-2">
		        <input type="radio" value="IC卡丢失或损坏" v-model="model.f_fillcard_type" class="magic-radio" id="type_two">
            <label for="type_two">IC卡丢失或损坏</label>
            <!-- <strong>IC卡丢失或损坏</strong> -->
	        </label>
          <label class="radio-inline col-sm-2" v-if="row.f_meter_type !== '机表'">
		        <input type="radio" value="IC卡信息错乱" v-model="model.f_fillcard_type" class="magic-radio" id="type_three">
            <label for="type_three">IC卡信息错乱</label>
            <!-- <strong>IC卡信息错乱</strong> -->
	        </label>
          <label class="radio-inline col-sm-2" v-if="row.f_meter_type !== '机表'">
		        <input type="radio" value="其他" v-model="model.f_fillcard_type" class="magic-radio" id="type_four">
            <label for="type_four">其他</label>
            <!-- <strong>其他</strong> -->
	        </label>
        </div>

        <div class="row" style="margin-top:30px;"  v-if='this.lose == true'>
          <label for="f_cardfees" class=" col-sm-2 control-label">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费:</label>
          <div class="col-sm-2">
            <input class="form-control" type="number" v-model="model.f_cardfees">
          </div>
        </div>
        <div class="row" style="margin-top:30px;" v-if='this.resaon == true'>
          <label for="f_reason" class=" col-sm-2 control-label">补卡原因:</label>
          <div class="col-sm-9">
            <textarea class="form-control" v-model="model.f_reason" v-validate:f_reason='{required: true }'
            rows="3" placeholder="补卡原因" ></textarea>
          </div>
        </div>
      </form>
      <machine-card-bill :show="print" v-ref:printbill :data='row' v-on:toggle="close"></machine-card-bill>
      <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
        <button class="btn btn-success" @click="confirm()"  :disabled='!$v.valid'>确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
        <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>
/**
*综合业务
*补卡管理组件
*/
import AppData from '../../../../../stores/AppData'

export default {
  title: '补卡管理',
  data () {
    return {
      model: {
        f_reason: '',
        f_fillcard_type: '',
        f_cardfees: '',
        f_replace_time: ''
      },
      cardallot: null,
      lose: false,
      resaon: false,
      print: false
    }
  },
  props: ['row'],
  ready () {
    if (AppData.getSingleValue('是否启用发卡管理')) {
      this.$CardManageService.getCardNumber()
      .then((res) => {
        this.cardallot = Object.assign({}, this.cardallot, res.data)
      })
    }
    console.log('补卡管理。。。。', this.row)
    this.model.f_fillcard_type = this.row.f_meter_type === '机表' ? 'IC卡丢失或损坏' : ''
  },
  watch: {
    'model.f_fillcard_type' (val) {
      if (val === 'IC卡丢失或损坏') {
        this.resaon = false
        this.lose = true
        this.model.f_cardfees = AppData.getSingleValue('默认卡费')
      } else if (val === '其他') {
        this.lose = false
        this.resaon = true
      } else {
        this.lose = false
        this.resaon = false
      }
    }
  },
  methods: {
    confirm () {
      if (AppData.getSingleValue('是否启用发卡管理')) {
        this.$showMessage(`您现在可以使用的卡号为:${this.cardallot.f_now_number},卡类型为:${this.cardallot.f_card_type},请确定您即将使用的是本卡号`,
           ['confirm', 'cancel']).then((res) => {
             if (res === 'confirm') {
               this.writeCard()
             }
           })
      } else {
        this.writeCard()
      }
    },
     // 写卡保存数据 迁至此处
    writeCard () {
      this.$CardService.replaceCard(this.model, this.row)
      .then(
        (res) => {
          this.row.id = res.data.id
          this.row.f_bill_type = '补卡'
          this.row.f_bill_style = '收据'
          this.row.f_preamount = `${this.model.f_cardfees}$`
          this.row.f_collection = `${this.model.f_cardfees}$`
          if (this.row.f_meter_type === '机表') {
            if (this.model.f_fillcard_type === 'IC卡丢失或损坏') {
              // 打票
              this.print = true
              this.$refs.printbill.bill.search(this.row.f_userinfo_id)
            } else {
              this.$dispatch('success', '补卡管理', this.row, res)
            }
          } else {
            this.print = true
            this.$refs.printbill.replacebill.search(res.data.id)
          }
        }
      ).catch(
        (error) => {
          if (error.status === 603) {
            this.$error('重复提交')
            return
          }
          this.$dispatch('error', '补卡管理', this.row, error)
        }
      )
    },
    clean () {
      this.$dispatch('clean', '补卡管理', this.row)
    },
    close () {
      this.print = false
      this.clean()
    }
  }
}
</script>

<style>
</style>
